import Vue from 'vue';

Vue.directive('lazy', {
  bind: function (el, binding, vnode) {
    const oLoad = el.getElementsByClassName('loading')[0];
    const oError = el.getElementsByClassName('error')[0];
    const oImage = el.getElementsByClassName('image')[0];

    // 创建监听
    const intersectionObserver = new IntersectionObserver(
      entries => {
        for (var entry of entries) {
          //  进入才会触发，离开不会
          //  与目标元素的交叉比例 1 完全交叉 一般一半即可
          if (entry.intersectionRatio > 0) {
            const image = new Image();
            //  根据交叉结果判断是否需要加载更多数据
            image.src = binding.value;

            //  加载成功
            image.onload = () => {
              oImage.src = binding.value;
              oLoad.style.display = 'none';
              oImage.style.display = 'block';
            }

            //  加载失败
            image.onerror = (err) => {
              oLoad.style.display = 'none';
              oError.style.display = 'block';
            }

            //  移除对该元素的监听
            intersectionObserver.unobserve(el);
          }
        }
      },
      {
        root: document.body
      }
    )

    //  监听元素 - 监听元素是否出现在可视化区域内
    intersectionObserver.observe(el);
  }
})